---
title: Next.js
description: Pravila za lintovanje specifična za Next.js za Ultracite.
---

Next.js konfiguracija sadrži pravila za lintovanje specifična za Next.js za optimizaciju slika, strukturu dokumenata i obrasce App Router-a.

## Instalacija

Dodajte Next.js konfiguraciju u vaš `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Pregled

Ova konfiguracija dodaje pravila specifična za razvoj u Next.js-u:

- **Optimizacija slika**: Nalaže upotrebu Next.js `<Image>` komponente
- **Struktura dokumenta**: Sprečava nepravilnu upotrebu specijalnih Next.js komponenti
- **Klijentske komponente**: Obezbeđuje da se asinhrone klijentske komponente pravilno obrađuju
- **Konfiguracioni fajlovi**: Posebno rukovanje za `next.config.*` fajlove

## Pravila specifična za Next.js

### Eksperimentalno

| Pravilo | Podešavanje | Opis |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Sprečava asinhrone klijentske komponente u Next.js-u. Klijentske komponente treba da budu sinhrone; za asinhrone operacije koristite serverske komponente. |

### Performanse

| Pravilo | Podešavanje | Opis |
|------|---------|-------------|
| `noImgElement` | `error` | Zabranjuje upotrebu HTML elementa `<img>`. Umesto toga koristite Next.js `<Image>` komponentu za automatsku optimizaciju slika. |

### Stil

| Pravilo | Podešavanje | Opis |
|------|---------|-------------|
| `noHeadElement` | `error` | Zabranjuje upotrebu HTML elementa `<head>`. Umesto toga koristite `next/head` iz Next.js-a ili App Router metadata API. |

### Sumnjivo

| Pravilo | Podešavanje | Opis |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Sprečava importovanje `next/document` u fajlovima stranica. `_document.tsx` bi trebalo da postoji samo kao `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Sprečava importovanje `next/head` u `_document.tsx`. Umesto toga koristite `<Head>` iz `next/document`. |

## Preklapanja konfiguracionih fajlova

Next.js preset uključuje posebno rukovanje za konfiguracione fajlove i App Router komponente:

### Konfiguracioni fajlovi Next.js-a

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Ovo omogućava obrasce konfiguracije za Next.js koji inače možda ne bi prošli lint pravila.

### Stranice i layout-i App Router-a

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Komponente stranica i layout-a App Router-a mogu biti asinhrone bez obaveznog korišćenja `await`, jer Next.js to posebno obrađuje za renderovanje na strani servera i dohvatanje podataka.